<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-layout-popuptype" *ngIf="isShowPopup">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
      <span class="ddp-txt-title-name">
            {{'msg.storage.ui.schema.config.title' | translate}}
      </span>
      <div class="ddp-ui-pop-buttons">
        <a href="javascript:" class="ddp-btn-pop" (click)="cancel()">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" (click)="save()">{{'msg.comm.btn.save' | translate}}</a>
      </div>
      <!-- det -->
    </div>
    <!-- //title -->
    <div class="ddp-ui-popup-contents ddp-configure-schema" [class.ddp-info]="!isExistErrorInFieldList" [class.ddp-info2]="isExistErrorInFieldList">
      <!-- message -->
      <div class="ddp-box-message">
        <div class="ddp-box-synch type-error" *ngIf="isExistErrorInFieldList">
          <div class="ddp-txt-synch">
            <em class="ddp-icon-info"></em>
            {{'msg.storage.ui.schema.valid.desc' | translate}}
          </div>
        </div>
        <div class="ddp-box-synch type-info" *ngIf="isShowMetadataGuide">
          <div class="ddp-txt-synch">
            <em class="ddp-icon-info"></em>
            {{'msg.storage.ui.guide.meta.modified' | translate}}
            <a href="javascript:" class="ddp-btn-info-close" (click)="isShowMetadataGuide = false"></a>
          </div>
        </div>
      </div>
      <!-- //message -->
      <!-- top option -->
      <div class="ddp-type-top-option ddp-clear">
        <!-- search -->
        <component-input
          [compType]="'search'"
          [optionalClass]="'ddp-fleft'"
          [showClear]="true"
          [value]="searchTextKeyword"
          [placeHolder]="'msg.storage.ui.column.search.description' | translate"
          (changeValue)="searchText($event)">
        </component-input>
        <!-- //search -->
        <div class="ddp-ui-rightoption ddp-type-schema">
          <!-- edit -->
          <div class="ddp-form-label2 ddp-fleft">
            <label class="ddp-label-type">{{'msg.comm.th.role' | translate}}</label>
            <div class="ddp-wrap-dropdown">
              <!-- select box -->
              <storage-filter-select-box
                [filterList]="roleTypeFilterList"
                [selectedFilter]="selectedRoleTypeFilter"
                (changedFilter)="onChangedRoleTypeFilter($event)"></storage-filter-select-box>
              <!-- //select box -->
            </div>
          </div>
          <!-- //edit -->
          <!-- edit -->
          <div class="ddp-form-label2 ddp-fleft">
            <label class="ddp-label-type">{{'msg.storage.ui.type' | translate}}</label>
            <div class="ddp-wrap-dropdown">
              <!-- select box -->
              <storage-filter-select-box
                [filterList]="logicalTypeFilterList"
                [selectedFilter]="selectedLogicalTypeFilter"
                (changedFilter)="onChangedLogicalTypeFilter($event)"></storage-filter-select-box>
              <!-- //select box -->
            </div>
          </div>
          <!-- //edit -->
          <!-- setting 버튼 -->
          <!--
              클릭시 ddp-selected 추가
          -->
          <!--<div class="ddp-ui-setbtn ddp-selected ">-->
          <!--<a href="javascript:" class="ddp-btn-setting"></a>-->
          <!--<div class="ddp-wrap-popup2">-->
          <!--<span class="ddp-txt-label2">-->
          <!--Column order setting-->
          <!--</span>-->
          <!--<ul class="ddp-list-popup">-->
          <!--<li class="ddp-selected">-->
          <!--<a href="javascript:">-->
          <!--In order of data-->
          <!--<em class="ddp-icon-check"></em>-->
          <!--</a>-->
          <!--</li>-->
          <!--<li>-->
          <!--<a href="javascript:">-->
          <!--A-Z-->
          <!--<em class="ddp-icon-check"></em>-->
          <!--</a>-->
          <!--</li>-->
          <!--<li>-->
          <!--<a href="javascript:">-->
          <!--Z-A-->
          <!--<em class="ddp-icon-check"></em>-->
          <!--</a>-->
          <!--</li>-->
          <!--<li>-->
          <!--<a href="javascript:">-->
          <!--High Frequency → low-->
          <!--<em class="ddp-icon-check"></em>-->
          <!--</a>-->
          <!--</li>-->
          <!--<li>-->
          <!--<a href="javascript:">-->
          <!--Low Frequency → high-->
          <!--<em class="ddp-icon-check"></em>-->
          <!--</a>-->
          <!--</li>-->
          <!--</ul>-->
          <!--</div>-->
          <!--</div>-->
          <!--&lt;!&ndash; //setting 버튼 &ndash;&gt;-->
          <!--<a href="javascript:" class="ddp-btn-selection ddp-gray"><em class="ddp-icon-plus"></em>Add column</a>-->
        </div>
      </div>
      <!-- //top option -->
      <!-- preview contents -->
      <div class="ddp-data-details ddp-ui-preview-contents">
        <!-- header -->

        <table class="ddp-table-form ddp-table-type2 ddp-table-details">
          <colgroup>
            <col width="120px">
            <col width="*">
            <col width="205px">
            <col width="165px">
            <col width="180px">
          </colgroup>
          <thead>
          <tr>
            <th>
              {{'msg.comm.th.role' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.field.name' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.logical.name'| translate}}
            </th>
            <th>
              {{'msg.storage.ui.type' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.description' | translate}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let column of filteredFieldList; let index = index;">
            <td class="ddp-txt-center">
              <span class="ddp-box-tag-value"
                    [class.ddp-measure]="column.role === FIELD_ROLE.MEASURE"
                    [class.ddp-dimension]="column.role === FIELD_ROLE.DIMENSION || column.role === FIELD_ROLE.TIMESTAMP">
                {{(column.role === FIELD_ROLE.MEASURE ? 'msg.comm.name.mea' : 'msg.comm.name.dim') | translate}}
              </span>
            </td>
            <td>
              <span class="ddp-txt-long" title="{{column.name}}">
                {{column.name}}
              </span>
            </td>
            <td [ngClass]="['ddp-input-form']"
                #nameTds
                (click)="focusNameInput(index)">
              <input type="text" class="ddp-txt-input"
                     #nameInputs
                     (blur)="blurNameInput(index)"
                     [ngModel]="column.logicalName"
                     (ngModelChange)="column.logicalName = $event;">
            </td>
            <td class="ddp-inherit ddp-info" [class.ddp-selected]="column.isShowTypeList || column.format?.isShowTimestampValidPopup" [ngClass]="TYPE_SELECT_LIST_WRAP_ELEMENT"
                (click)="onChangeTypeListShowFlag(column, $event)">
              <!-- select -->
              <div class="ddp-ui-selected-option" [class.ddp-selected]="column.isShowTypeList" [ngClass]="TYPE_SELECT_LIST_WRAP_ELEMENT">
                <span class="ddp-link-text ddp-txt-icon" [ngClass]="TYPE_SELECTED_LABEL_ELEMENT">
                  <em class="{{getFieldTypeIconClass(column.logicalType)}}" [ngClass]="TYPE_SELECTED_ICON_ELEMENT"></em>
                  {{column.role === FIELD_ROLE.TIMESTAMP ? ('msg.storage.ui.list.timestamp' | translate) : getSelectedLogicalTypeLabel(column)}}
                  <span class="ddp-wrap-icons" [ngClass]="TYPE_SELECT_LIST_ICON_ELEMENT" *ngIf="!isDisableChangeType(column)"></span>
                </span>
                <!-- popup -->
                <div class="ddp-wrap-popup2 ddp-types ddp-scroll-none" *ngIf="!isDisableChangeType(column)">
                  <ul class="ddp-list-popup">
                    <li *ngFor="let type of convertibleTypeList"
                        [ngClass]="{'ddp-selected' : column.logicalType === type.value}">
                      <a href="javascript:" (click)="onChangeLogicalType(column, type)">
                        <em class="{{getFieldTypeIconClass(type.value)}}"></em>
                        {{type.label}}
                        <em class="ddp-icon-check"></em>
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- //popup -->
              </div>
              <!-- //select -->
              <div class="ddp-ui-info" [class.ddp-selected]="column.format?.isShowTimestampValidPopup"  *ngIf="isShowInformationIcon(column)">
                <em [class.ddp-icon-sinfo2]="isValidInformationIcon(column)" [class.ddp-icon-error2]="isInvalidInformationIcon(column)" (click)="onClickInfoIcon(column)"></em>
                <!-- format layer -->
                <datetime-valid-popup [fieldFormat]="column?.format"
                                      [fieldDataList]="fieldDataList"
                                      [fieldName]="column.name"
                                      (changedFieldFormat)="column.format = $event"
                                      (changedFieldFormatValid)="setIsExistErrorInFieldListFlag()"></datetime-valid-popup>
                <!-- //format layer -->
              </div>
            </td>
            <!-- description -->
            <td [ngClass]="['ddp-input-form']"
                #descriptionTds
                (click)="focusDescriptionInput(index)">
              <input type="text" class="ddp-txt-input"
                     #descriptionInputs
                     (blur)="blurDescriptionInput(index)"
                     [ngModel]="column.description"
                     (ngModelChange)="column.description = $event;">
            </td>
            <!-- //description -->
          </tr>
          </tbody>
        </table>
        <!-- //header -->
      </div>
      <!-- //preview contents -->
    </div>
  </div>
</div>
